<template>
  <div class="plan-basic-info">
    <el-card class="box-card">
      <div slot="header">
        <span>基础信息</span>
      </div>

      <el-form :model="formData" :rules="rules" ref="form" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="计划编号" prop="planNo" required>
              <el-input v-model="formData.planNo" disabled placeholder="系统自动生成"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划名称" prop="planName" required>
              <el-input v-model="formData.planName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="计划开始时间" prop="startTime" required>
              <el-date-picker v-model="formData.startTime" type="datetime" placeholder="请选择日期" style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划结束时间" prop="endTime" required>
              <el-date-picker v-model="formData.endTime" type="datetime" placeholder="请选择日期" style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="计划类型" prop="planType" required>
              <el-select v-model="formData.planType" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in planTypeOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执行周期规则" prop="executeRule" required>
              <el-input v-model="formData.executeRule" placeholder="请输入">
                <el-button slot="append" icon="el-icon-search" @click="handleSearchRule"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="执行规则描述" prop="ruleDescription">
              <el-input type="textarea" :rows="4" placeholder="请输入执行规则描述" v-model="formData.ruleDescription">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="计划状态" prop="status" required>
              <el-radio-group v-model="formData.status">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input type="textarea" :rows="4" placeholder="请输入备注" v-model="formData.remark">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="box-card9o">
      <div slot="header">
        <span>设备明细</span>
      </div>

      <div class="equipment-detail">
        <div class="operation-buttons">
          <el-button type="success" @click="handleAdd">添加</el-button>
          <el-button type="info" @click="handleBatchRemove">移除</el-button>
        </div>

        <el-table :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column prop="index" label="序号" width="60" align="center">
          </el-table-column>
          <el-table-column label="操作" width="80" align="center">
            <template slot-scope="scope">
              <el-button type="text" style="color: #67C23A" @click="handleRemove(scope.$index)">移除</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="equipmentNo" label="设备编号" width="180" align="center">
          </el-table-column>
          <el-table-column prop="equipmentName" label="设备名称" width="120" align="center">
          </el-table-column>
          <el-table-column prop="specModel" label="规格型号" width="120" align="center">
          </el-table-column>
          <el-table-column prop="equipmentType" label="设备类型" width="120" align="center">
          </el-table-column>
          <el-table-column prop="brand" label="品牌" width="120" align="center">
          </el-table-column>
          <el-table-column prop="department" label="使用部门" width="120" align="center">
          </el-table-column>
          <el-table-column prop="location" label="存放位置" min-width="120" align="center">
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header">
        <span>保养人员</span>
      </div>
      <el-form :model="formData2" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="保养班组">
              <el-input v-model="formData.team" placeholder="请输入" class="input-with-select">
                <el-button slot="append" icon="el-icon-more" @click="handleSelectTeam"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保养负责人">
              <el-input v-model="formData.leader" placeholder="请输入" class="input-with-select">
                <el-button slot="append" icon="el-icon-more" @click="handleSelectLeader"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="其他保养人">
              <el-input v-model="formData.others" placeholder="请输入" class="input-with-select">
                <el-button slot="append" icon="el-icon-more" @click="handleSelectOthers"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="box-card">
      <div slot="header">
        <span>保养项目</span>
      </div>
      <div class="maintenance-items">
        <div class="operation-buttons">
          <el-button type="success" @click="handleAdd2">添加</el-button>
          <el-button type="info" @click="handleBatchRemove2">移除</el-button>
        </div>

        <el-table :data="tableDatamu" border style="width: 100%" @selection-change="handleSelectionChange2">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="index" label="序号" width="60">
          </el-table-column>
          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <el-button type="text" style="color: #67C23A" @click="handleRemove2(scope.$index)">移除</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="itemName" label="保养项目" width="200">
          </el-table-column>
          <el-table-column prop="department" label="保养部位" width="180">
          </el-table-column>
          <el-table-column prop="level" label="保养等级" width="120">
          </el-table-column>
          <el-table-column prop="requirement" label="保养要求" min-width="180">
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <!--关联文件-->
    <div>
      <el-card class="box-card3aa">
        <div slot="header" class="clearfix">
          <span>关联文件</span>
        </div>
        <el-button-group style="margin-bottom: 20px;">
          <el-upload ref="upload2" action="http://localhost:9289/maintenance/upload2" :on-success="handleUploadSuccess2"
            :file-list="fileList" :auto-upload="true" :show-file-list="false" :before-upload="beforeUpload">
            <el-button>上传文档</el-button>
          </el-upload>
          <el-button @click="removeSelectedRows2" style="margin-left: 112px;
    margin-top: -36px;">移除</el-button>
        </el-button-group>
        <el-table :data="documents" style="width: 100%;" border @selection-change="handleSelectionChange2">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="name" label="文件名"></el-table-column>
          <el-table-column prop="uploadDate" label="上传时间"></el-table-column>
          <el-table-column prop="uploader" label="上传者"></el-table-column>
          <el-table-column prop="size" label="文档大小"></el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text" @click="removeRow3(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div style="height: 120px;">
      <el-footer class="footer">
        <el-button @click="handleCancel" style="margin-top: 20px; margin-left: -140px;">关闭</el-button>
        <el-button type="primary" @click="handleConfirm" style="margin-top: 20px; margin-left: 20px;">确认</el-button>
      </el-footer>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PlanBasicInfo',
  data() {
    return {
      //关联文件上传
      documents: [],
      fileList: [],
      multipleSelection: [],
      //保养项目
      tableDatamu: Array.from({ length: 5 }, (_, index) => ({
        index: index + 1,
        itemName: '润滑油更换',
        department: '液压系统',
        level: '一级',
        requirement: '润滑'
      })),
      selectedRowsmu: [],
      //保养人员
      formData2: {
        team: '',
        leader: '',
        others: ''
      },
      tableData: Array.from({ length: 5 }, (_, index) => ({
        index: index + 1,
        equipmentNo: 'SB202211171302',
        equipmentName: '机床',
        specModel: 'CNC-500',
        equipmentType: '生产设备',
        brand: '不知名品牌',
        department: '生产部门',
        location: '生产车间'
      })),
      selectedRows: [],
      formData: {
        planNo: '',
        planName: '',
        startTime: '',
        endTime: '',
        planType: '',
        executeRule: '',
        ruleDescription: '',
        status: 1,
        remark: ''
      },
      planTypeOptions: [
        { value: 'daily', label: '日计划' },
        { value: 'weekly', label: '周计划' },
        { value: 'monthly', label: '月计划' },
        { value: 'quarterly', label: '季度计划' },
        { value: 'yearly', label: '年度计划' }
      ],
      rules: {
        planName: [
          { required: true, message: '请输入计划名称', trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: '请选择开始时间', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '请选择结束时间', trigger: 'change' }
        ],
        planType: [
          { required: true, message: '请选择计划类型', trigger: 'change' }
        ],
        executeRule: [
          { required: true, message: '请输入执行周期规则', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    //关联文件上传
    beforeUpload(file) {
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isLt10M) {
        this.$message.error("上传文件大小不能超过 10MB!");
      }
      return isLt10M;
    },
    removeRow3(index) {
      this.documents.splice(index, 1);
    },
    removeSelectedRows2() {
      this.documents = this.documents.filter(
        (item) => !this.multipleSelection.includes(item)
      );
    },
    handleSelectionChange2(val) {
      this.multipleSelection = val;
    },
    //文件上传成功时候
    handleUploadSuccess2(response, file, fileList) {
      this.documents.push({
        name: file.name,
        url: file.url,
        uploadDate: new Date().toLocaleDateString('zh').replaceAll('/', '-'),
        uploader: this.$store.state.user.name,
        size: file.size + " KB",
      });
      console.log("数据2", this.documents);
    },
    handleAdd2() {
      this.$message.success('打开添加保养项目弹窗')
    },
    handleRemove2(index) {
      this.$confirm('确认移除该保养项目?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableDatamu.splice(index, 1)
        this.$message.success('移除成功')
      }).catch(() => { })
    },
    handleBatchRemove2() {
      if (this.selectedRowsmu.length === 0) {
        return this.$message.warning('请选择要移除的项目')
      }
      this.$confirm(`确认移除选中的 ${this.selectedRowsmu.length} 个项目?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = this.selectedRowsmu.map(row => row.index)
        this.tableDatamu = this.tableDatamu.filter(row => !ids.includes(row.index))
        this.$message.success('批量移除成功')
      }).catch(() => { })
    },
    handleSelectionChange2(val) {
      this.selectedRowsmu = val
    },
    //保养人员
    handleSelectTeam() {
      this.$message.info('打开保养班组选择弹窗')
    },
    handleSelectLeader() {
      this.$message.info('打开保养负责人选择弹窗')
    },
    handleSelectOthers() {
      this.$message.info('打开其他保养人选择弹窗')
    },
    //设备明细
    handleAdd() {
      this.$message.success('打开添加设备弹窗')
    },
    handleRemove(index) {
      this.$confirm('确认移除该设备?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData.splice(index, 1)
        this.$message.success('移除成功')
      }).catch(() => { })
    },
    handleBatchRemove() {
      if (this.selectedRows.length === 0) {
        return this.$message.warning('请选择要移除的设备')
      }
      this.$confirm(`确认移除选中的 ${this.selectedRows.length} 个设备?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = this.selectedRows.map(row => row.index)
        this.tableData = this.tableData.filter(row => !ids.includes(row.index))
        this.$message.success('批量移除成功')
      }).catch(() => { })
    },
    handleSelectionChange(val) {
      this.selectedRows = val
    },
    handleSearchRule() {
      this.$message.info('打开执行规则选择弹窗')
    }
  }
}
</script>

<style scoped>
.box-card3aa {
  width: 1200px;
  margin-left: 15px;
  margin-bottom: 20px;
}

.fixed-footer-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.footer {
  text-align: center;
  background-color: #eeeded;
  position: fixed;
  bottom: 0;
  z-index: 1;
  width: 100%;
}

.equipment-detail {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
}

.operation-buttons {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.el-table {
  margin-bottom: 20px;
}

.el-button--text {
  padding: 0;
}

.el-table .cell {
  padding-left: 10px;
  padding-right: 10px;
}

.el-input--mini {
  font-size: 12px;
}

.plan-basic-info {
  padding: 20px;
}

.box-card {
  width: 1200px;
  margin-left: 15px;
  margin-bottom: 20px;
}

.box-card9o {
  width: 1200px;
  margin-left: 15px;
  margin-bottom: 20px;
}

.el-select {

  width: 100%;
}

.el-textarea__inner {
  font-family: inherit;
}

.el-input-group__append {
  background-color: #409EFF;
  border-color: #409EFF;
  color: #fff;
}

.el-input-group__append:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.el-input-group__append .el-icon-search {
  color: #fff;
}

.required-label::before {
  content: '*';
  color: #F56C6C;
  margin-right: 4px;
}
</style>
